<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="./dist/tsdk.min.js"></script>
    <script>
        var url = prompt("请求输入访问地址(携带https://)", "");
        function login() {

            var params = {};
            params.hotLine = document.getElementById('hotLine').value;
            params.cno =  document.getElementById('cno').value;
            params.pwd =  document.getElementById('pwd').value;
            params.bindTel =  document.getElementById('bindTel').value;
            params.bindType = document.getElementById('bindType').value;
            params.initStatus =  document.getElementById('initStatus').value;
            params.baseUrl = url;
            if(params.bindType === "3"){
                params.sipIp = document.getElementById('sipIp').value;
                params.sipPwd = document.getElementById('sipPwd').value;
            }

            alert("do login");
            executeAction('doLogin', params);
        }
        
        function logout() {
            var params = {};
            params.type = '1';
            executeAction('doLogout', params);
        }
        
        function callout() {
            var callee = document.getElementById('tel').value;
            if(callee === '' || callee === undefined){
                alert('请输入外呼号码');
                return;
            }
            var params = {};
            params.tel = callee;
            params.callType = '3';
            executeAction('doPreviewOutCall', params);
        }
        
        function hold() {
            var params = {};
            executeAction('doHold', params);
        }

        function unhold() {
            var params = {};
            executeAction('doUnhold', params);
        }

        function hangup() {
            var params = {};
            executeAction('doUnLink', params);
        }
        

        function cbLogout(data) {
            if(data.code === 2){
                alert("坐席未签入");
            }else {
                document.getElementById('agent-state').innerHTML = '登出';
            }
        }

		function cbPreviewOutCall(data) {

		}

        function cbThisStatus(data) {
            alert("cb status : " + data.eventName);

            if(data.eventName === 'outRinging' && data.name === 'ringing'){
                document.getElementById('agent-state').innerHTML = '振铃中';
                document.getElementById('custom-call').innerHTML = data.customerNumber;
            }else if(data.eventName === 'comeRinging' && data.name === 'ringing'){
                document.getElementById('agent-state').innerHTML = '振铃中';
                document.getElementById('custom-call').innerHTML = data.customerNumber;
            }else if(data.eventName === 'onlineUnlink'){
                document.getElementById('custom-call').innerHTML = '';
            }else if(data.eventName === 'pauseUnlink'){
                document.getElementById('custom-call').innerHTML = '';
            }else if(data.eventName === 'ready'){
                document.getElementById('agent-state').innerHTML = '就绪';
            }else if(data.eventName === 'notready'){
                document.getElementById('agent-state').innerHTML = '未就绪';
            }else if(data.eventName === 'busy'){
                document.getElementById('agent-state').innerHTML = '忙碌';
            }else if(data.eventName === 'hold'){
                document.getElementById('agent-state').innerHTML = '保持';
            }else if(data.eventName === 'answered'){
                document.getElementById('agent-state').innerHTML = '通话中';
            }
        }
    </script>
</head>
<body>
<div>


    <div style="float: left">
        <table cellspacing="2" cellpadding="2" style="border:solid 0px #ccc;background-color:#eee;">
            <tr>
                <td width="100" height="30" align="right">热线号码：</td>
                <td align="left"><input type="text" value="" id="hotLine"/></td>
            </tr>
            <tr>
                <td width="100" height="30" align="right">座席号：</td>
                <td align="left"><input type="text" value="" id="cno"/></td>
            </tr>
            <tr>
                <td width="100" height="30" align="right">密码：</td>
                <td align="left"><input type="text" value="" id="pwd"/></td>
            </tr>
            <tr>
                <td width="100" height="30" align="right">绑定电话：</td>
                <td align="left"><input type="text" value="" id="bindTel"/></td>
            </tr>
            <tr>
                <td width="100" height="30" align="right">电话类型：</td>
                <td align="left">
            <span style="float:left">
            <select id="bindType">
                <option value="1" >电话号码</option>
                <option value="2" selected>分机号码</option>
                <option value="3">软电话</option>
            </select>
           </span>
                    <span style="display:none; float:left;" id="sipSpan">软电话IP：<input id="sipIp" type="text" value="" />软电话密码：<input id="sipPwd" type="text" value=""/></span>
                </td>
            </tr>
            <tr>
                <td width="0" align="right" height="30">初始状态：</td>
                <td align="left">
                    <select id="initStatus">
                        <option value="online">空闲</option>
                        <option value="pause">置忙</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2" height="30" align="center">
                    <input type="button" value="登陆" onclick="login()" />
                    <input type="button" value="退出" onclick="logout()"/>
                </td>
            </tr>
        </table>
    </div>

    <div style="float: left; background-color: #eeeeee;margin-left: 20px;padding-bottom: 45px;">

            <br />
        <tr>
            <p>
                <div style="width: 200px; float: left">坐席状态: <label id="agent-state" style="width: 100px;"></label></div>
                <div style="">客户号码: <label id="custom-call"></label></div>
            </p>
        </tr>

            <br />

        <tr>
            <td colspan="2" height="45" align="left">
                <div style="width:718px;border:0px solid #999; padding:3px;">
                    <input type="text" id="tel"/>
                    <input type="button" id="phoneCallDiv" value="呼叫" onclick="callout()"/>
                    <input type="button" id="hangup" value="挂机" onclick="hangup()"/>


                    <br />
                    <br />

                    <input type="button" id="hold" value="保留" onclick="hold()"/>
                    <input type="button" id="unhold" value="保留取消" onclick="unhold()"/>

                    <br />
                    <br />

                    <input type="text" id="transferText" value=""/>
                    <input type="button" id="transfer" value="转移" onclick=""/>
                </div>
            </td>
        </tr>
    </div>

</div>


</body>
</html>